// Copyright (c) Microsoft. All rights reserved.

@import 'src/styles/mixins';
@import 'src/styles/themes';

$heightOfGradient: 8px;
$maxScrollableHeight: 268px;
$scrollbarWidth: 4px;

.property-grid-container {
  display: flex;
  flex-flow: column wrap;
  position: relative;
  @include rem-fallback(padding-left, 8px);

  .grid-header .cell {
    font-family: $fontSelawikBold;
    text-transform: uppercase;
    @include rem-fallback(font-size, 10px);
    @include rem-fallback(padding-top, 4px);
  }

  .grid-scrollable {
    overflow-y: auto;
    @include rem-fallback(max-height, $maxScrollableHeight);

    &::-webkit-scrollbar {
      width: $scrollbarWidth;
      height: $scrollbarWidth;
    }

    // Adds the gradient after the scrollable area
    &:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: $scrollbarWidth;
      height: $heightOfGradient;
      pointer-events: none; // Allow clicking through the gradient
    }
  }

  .row {
    display: flex;
    flex-direction: row;
    @include rem-fallback(padding, 16px, 0px, 16px, 8px);

    .cell {
      display: flex;
      flex-basis: 50%;
      flex-grow: 1;
      flex-direction: column;

      &.col-1 { flex-basis: 10%; }
      &.col-2 { flex-basis: 20%; }
      &.col-3 { flex-basis: 30%; }
      &.col-4 { flex-basis: 40%; }
      &.col-5 { flex-basis: 50%; }
      &.col-6 { flex-basis: 60%; }
      &.col-7 { flex-basis: 70%; }
      &.col-8 { flex-basis: 80%; }
      &.col-9 { flex-basis: 90%; }
    }
  }

  @include themify($themes) {
    .grid-header {
      border-bottom: 1px solid themed('colorPropertyGridBorder');

      .row .cell { color: themed('colorContentTextDim'); }
    }

    .row {
      border-bottom: 1px solid themed('colorPropertyGridBorder');

      &:last-child { border-bottom: none; }

      .cell { color: themed('colorContentText'); }
    }

    .grid-scrollable:after {
        @include linear-gradient(themed('colorFlyoutBackground'), 0.25, themed('colorFlyoutBackground'), 1);
        border-bottom: 1px solid themed('colorPropertyGridBottomBorder');
    }
  }
}
